<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>应用快速启动</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 95%;
                margin: 0;
                background-color: #f0f0f0;
            }
            #apps-container {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 20px; /* 应用之间的间距 */
                padding: 10px;
                overflow-x: auto; /* 允许横向滚动 */
            }
            .app {
                width: 100px;
                height: 100px;
                margin: 5px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: #ffffff;
                transition: all 0.3s ease;
                position: relative;
            }
            .app:hover {
                transform: scale(1.1);
                background-color: rgba(255, 255, 255, 0.9);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            .app img {
                width: 50px;
                height: 50px;
                margin-bottom: 8px;
            }
            .app span {
                font-size: 12px;
                color: #333;
                text-align: center;
                max-width: 90px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div id="apps-container">等待数据加载...</div>
        <script>
            console.log("Script loaded");

            // Function to create app elements
            function createAppElement(app) {
                console.log("Creating element for app:", app);
                if (!app || typeof app !== "object") {
                    console.error("Invalid app data:", app);
                    return null;
                }

                const appDiv = document.createElement("div");
                appDiv.className = "app";
                appDiv.innerHTML = `
                    <img src="${app.icon || ""}" alt="${
                    app.app_name || "未知应用"
                }" onerror="this.src=''">
                    <span>${app.app_name || "未知应用"}</span>
                `;
                appDiv.onclick = () => {
                    console.log("App clicked:", app.app_url);
                    window.electronAPI.createNewBrowserView(app.app_url);
                };
                return appDiv;
            }

            window.electronAPI.receiveAppsData((data) => {
                console.log("Received new apps data:", data, typeof data);
                if (!data) {
                    console.error("Received data is undefined or null");
                    return;
                }
                updateAppsList(data);
            });

            function updateAppsList(appsData) {
                const container = document.getElementById("apps-container");
                if (!container) {
                    console.error("Apps container not found");
                    return;
                }

                console.log(
                    "Updating apps list with data:",
                    appsData,
                    typeof appsData
                );

                // 检查数据是否有效
                if (!appsData || !Array.isArray(appsData)) {
                    console.error("Invalid apps data:", appsData);
                    container.innerHTML = "无效的应用数据";
                    return;
                }

                // 清空现有内容
                container.innerHTML = "";

                // 添加新的应用列表
                appsData.forEach((app) => {
                    console.log("Processing app:", app);
                    const appElement = createAppElement(app);
                    container.appendChild(appElement);
                });

                // 如果没有应用数据，显示提示信息
                if (appsData.length === 0) {
                    container.innerHTML = "暂无应用数据";
                }
            }

            // 监听数据更新事件
            window.addEventListener("apps-data-updated", () => {
                console.log("Apps data update event received");
            });
        </script>
    </body>
</html>
